<template>
  <div class="container">
    <div class="sidebar">
      <div class="row" style="min-height: 5vh">
        <q-btn
          label="数据文件"
          size="md"
          style="padding: 0 1vw"
          :class="{ 'active-tab': Tab === 'data' }"
          flat
          @click="changeTab('data')"
        />
        <q-btn
          label="结果文档"
          size="md"
          style="padding: 0 1vw"
          :class="{ 'active-tab': Tab === 'result' }"
          flat
          @click="changeTab('result')"
        />
      </div>
      <div class="file-list">
        <!-- 数据文件内容 -->
        <div v-if="Tab === 'data'">
          <div v-if="files.length === 0">请上传文件</div>
          <div v-else>
            <div
              v-for="(file, index) in files"
              :key="index"
              class="file-item"
              :class="{
                'file-item-selected': file.id === selectedFileID,
                'file-item-active': file.id === selectedFileID && selectedFileHeader
              }"
              @dblclick="viewExcelContent(file)"
              @click="showFileInfo(file)"
            >
              {{ file.file.name }}
              <q-icon
                name="delete"
                class="delete-icon"
                color="red"
                @click.stop="handleDeleteFile(file)"
              >
                <q-tooltip class="bg-red" :offset="[10, 10]"> 删除 </q-tooltip>
              </q-icon>
            </div>
          </div>
        </div>

        <div v-if="Tab === 'result'">
          <!-- 按用户ID和项目ID分组 -->
          <q-page>
            <div
              v-for="(files, file_name) in result_files"
              :key="file_name"
              class="user-group"
            >
              <q-expansion-item
                :label="file_name"
                :dense="true"
                expand-icon="keyboard_arrow_down"
              >
                <q-list>
                  <q-item
                    v-for="file in files"
                    :key="file.file_name"
                    style="min-height: 20px"
                    class="file-item"
                    :class="{
                      'result-file-selected': file.selected
                    }"
                    clickable
                    @click.stop="handleClickEvent(file)"
                  >
                    <q-item-section>{{ file.file_name }}</q-item-section>
                  </q-item>
                </q-list>
              </q-expansion-item>
            </div>
          </q-page>
        </div>
      </div>

      <div class="button-group">
        <q-btn
          label="上传数据"
          color="primary"
          class="small-button"
          @click="openUploadDialog"
        />
        <q-btn
          :label="isShowData ? '关闭数据' : '开启数据'"
          color="secondary"
          class="small-button"
          @click="controlData"
        />
      </div>
    </div>

    <div
      v-if="!selectedFile && !selectedFileHeader && !showDrawComponent"
      class="q-pa-md q-gutter-md"
    >
      <div class="text-h5 q-mt-xl" style="margin-left: 30vw">
        请选择
        <strong v-if="props.selectedProject">文件</strong>
        <strong v-else>项目</strong>
      </div>
    </div>
    <div v-else class="content">
      <div v-if="selectedFile && !showDrawComponent">
        <lucky-excel
          :excel-file="selectedFile.file"
          @fileUploadFun="handleUploadFileSuccess"
          :selectedProject="props.selectedProject"
        />
      </div>

      <!-- 组件传了表头的Excel数据给了子组件 -->
      <div v-if="selectedFileHeader && !showDrawComponent&&props.currentTab=='modeling'">
        <ExcelContentDisplay
          :excelData="fileHeaderInfo"
          :fileID="selectedFileID"
          :currentTab="props.currentTab"
          :isShowData="isShowData"
          @close-modeling="handleCloseModeling"
        />
      </div>
      <div v-if="props.currentTab == 'result'" style="height: 80vh !important">
        <Result></Result>
      </div>
      <!-- 新增画图组件 -->
      <div v-if="drawFileID && !selectedFile && props.currentTab == 'drawing'">
        <PlotComponent
          :file_id="drawFileID"
          :project_id="props.selectedProject"
          :xlsx_name="xlsx_name"
        />
      </div>
    </div>
    <!-- 上传数据对话框 -->
    <q-dialog v-model="uploadDialog" persistent>
      <q-card class="q-pa-md" style="min-width: 400px">
        <q-card-section>
          <div class="text-h6 q-mb-md">上传数据</div>

          <!-- 选择上传方式 -->
          <q-option-group
            v-model="uploadOption"
            :options="uploadOptions"
            @change="handleUploadOptionChange"
            class="q-mb-lg"
            inline
            color="primary"
          />

          <!-- 导入数据选项 -->
          <div v-if="uploadOption === 'import'">
            <q-file
              v-model="uploadedFile"
              label="选择文件"
              filled
              square
              class="q-mb-md"
            />
            <q-input
              v-model.number="startingRow"
              label="输入要提取的行（数字）"
              type="number"
              min="1"
              filled
              square
              class="q-mt-md q-mb-md"
            />
          </div>

          <!-- 创建新数据选项 -->
          <div v-if="uploadOption === 'create'">
            <q-input
              v-model="newFileName"
              label="输入文件名"
              filled
              square
              class="q-mb-md"
            />
            <q-input
              v-model.number="startingRow"
              label="输入要提取的行（数字）"
              type="number"
              min="1"
              filled
              square
              class="q-mt-md q-mb-md"
            />
          </div>
        </q-card-section>

        <!-- 操作按钮 -->
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            @click="uploadFile"
            label="确定"
            color="primary"
            class="q-mr-sm"
            :disable="
              !uploadOption || (!uploadedFile && uploadOption === 'import')
            "
          />
          <q-btn
            @click="uploadDialog = false"
            label="取消"
            color="secondary"
            flat
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import LuckyExcel from "src/components/File/OnlineExcel.vue"; // 引入子组件
import ExcelContentDisplay from "src/components/File/ExcelContentDisplay.vue"; // 引入子组件
import PlotComponent from "src/components/Draw/Drawing.vue";
import Result from "src/components/Result.vue";
import { createFile, deleteFile, getFiles, getDrawData } from "src/api/api";

import { useFilesStore } from "src/stores/files-store";
import { useQuasar } from "quasar";
import JSZip from "jszip";
import { MAX } from "uuid";
// const userId = window.localStorage.getItem("userId");
const userId = 1;
const $q = useQuasar();
const props = defineProps({
  selectedProject: {
    type: [String, Number], // 根据实际的项目 ID 类型选择 String 或 Number
    required: true,
  },
  selectedProjectName: {
    type: [String, Number], // 根据实际的项目 ID 类型选择 String 或 Number
    required: true,
  },
  currentTab: {
    type: String,
    required: true,
  },
});

const uploadOption = ref("import"); // 默认选择导入数据
const uploadOptions = ref([
  {
    label: "导入数据",
    value: "import",
  },
  {
    label: "创建数据",
    value: "create",
  },
]);
const filesStore = useFilesStore();

const files = ref([]); // 使用 ref 来管理文件列表的状态
const result_files = ref([]); // 使用 ref 来管理文件列表的状态
const drawFileID = ref(null); // 保存上传的文件
const xlsx_name = ref(""); // 保存上传的文件
// 从后端获取文件列表
const fetchFiles = async () => {
  result_files.value = [];
  try {
    const response = await getDrawData({
      project_id: props.selectedProject,
    });
    result_files.value = response.data; // 将接口返回的数据赋值给 files
  } catch (error) {
    console.error("Failed to fetch files:", error);
  }
};

// 处理按钮点击事件,展示绘图页面
const handleClickEvent = (file) => {
  // 如果点击的是当前已选中的文件，则取消选中
  if (file.selected) {
    file.selected = false;
    selectedResultFile.value = null;
    drawFileID.value = null;
    xlsx_name.value = "";
    showDrawComponent.value = false;
    return;
  }

  // 清除其他文件的选中状态
  if (result_files.value) {
    Object.values(result_files.value).forEach(files => {
      files.forEach(f => {
        f.selected = false;  // 清除所有文件的选中状态
      });
    });
  }

  // 设置当前点击文件的状态
  file.selected = true;
  selectedResultFile.value = file;
  drawFileID.value = file.file_id;
  xlsx_name.value = file.file_name;
  showDrawComponent.value = true;
  selectedFile.value = null;
  selectedFileHeader.value = false;
};

const initFiles = async () => {
  // 判断 store 中是否已有对应项目的数据
  if (filesStore.hasFilesForProject(props.selectedProject)) {
    files.value = filesStore.getFilesForProject(props.selectedProject); // 直接从 store 中获取数据
    return;
  }

  files.value = []; // 清空之前的文件列表

  // 获取项目中的文件列表
  const response = await getFiles(props.selectedProject);

  if (response.status === 200) {
    const contentDisposition = response.headers.get("content-disposition");
    const blob = await response.data; // 确保获取 Blob 对象

    if (contentDisposition && contentDisposition.includes("filename")) {
      const zip = new JSZip();
      try {
        const unzipped = await zip.loadAsync(blob); // 读取 ZIP 文件
        const filesList = [];

        if (unzipped.files["file_info.json"]) {
          const jsonData = await unzipped.files["file_info.json"].async(
            "string"
          );
          const fileInfo = JSON.parse(jsonData);

          // 遍历 ZIP 文件中的所有 Excel 文件
          for (const filename of Object.keys(unzipped.files)) {
            const fileData = await unzipped.files[filename].async("blob");

            if (filename.endsWith(".xlsx") || filename.endsWith(".xls")) {
              const fileObject = new File([fileData], filename, {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              });

              const fileId = fileInfo.find(
                (fileInfo) => fileInfo.filename === filename
              )?.id;
              const header_row = fileInfo.find(
                (fileInfo) => fileInfo.filename === filename
              )?.header_row;

              if (fileId) {
                filesList.push({
                  id: fileId,
                  file: fileObject,
                  header_row: header_row,
                });
              }
            }
          }
        }

        // 将文件列表写入 Pinia store
        filesStore.setFilesForProject(props.selectedProject, filesList);
        files.value = filesList; // 更新组件内的 files 数据
      } catch (error) {
        console.error("解压 ZIP 文件失败:", error);
      }
    } else {
      $q.notify({
        type: "warning",
        message: "请上传文件",
      });
    }
  } else {
    $q.notify({
      type: "negative",
      message: "获取文件列表失败",
    });
  }
};

const handleUploadFileSuccess = (msg) => {
  filesStore.clearFilesForProject(props.selectedProject);
  initFiles(); // 文件上传成功后重新获取文件列表
  selectedFile.value.file = msg; // 清空选择的文件
};

const uploadDialog = ref(false); // 控制文件上传对话框的显示
const uploadedFile = ref(null); // 存储选择的文件
const newFileName = ref(""); // 存储新文件的名称
const selectedFile = ref(null); // 当前选择的文件传递给子组件
const selectedFileID = ref(null); // 当前选择的文件传递给子组件
const selectedFileHeader = ref(false); // 标记是否有文件头部信息
const showDrawComponent = ref(false); // show 绘图
const selectedFileContent = ref([]); // 存储选择的文件内容
const fileHeaderInfo = ref([]); // 存储文件信息
const startingRow = ref(1); // 用户输入的要提取的行 默认值是1
const Tab = ref("data"); // 默认为数据文件

// 监视 selectedProject 的变化
watch(
  () => props.selectedProject,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      initFiles(); // 当 selectedProject 变化时重新调用 initFiles
      fetchFiles(); // 重新获取文件列表
      selectedFile.value = null; // 清空选择的文件
      selectedFileID.value = null; // 清空选择的文件
      selectedFileContent.value = []; // 清空选择的文件内容
      fileHeaderInfo.value = []; // 清空文件信息
      selectedFileHeader.value = false; // 清空文件头部信息
      showDrawComponent.value = false;
    }
  },
  {
    immediate: true,
  }
);
watch(uploadOption, (newValue) => {
  if (newValue === "import") {
    uploadedFile.value = null; // 重置文件
    startingRow.value = 1; // 重置起始行
  } else if (newValue === "create") {
    uploadedFile.value = null; // 重置文件
    startingRow.value = 1; // 清空行数
  }
});

// 打开上传对话框
const openUploadDialog = () => {
  uploadDialog.value = true; // 打开上传对话框
  uploadOption.value = "import"; // 默认选择导入数据
};

// 根据选择的上传选项处理显示内容
const handleUploadOptionChange = (value) => {
  uploadOption.value = value; // 更新当前选择的上传选项
};

const uploadFile = async () => {
  if (uploadOption.value === "import") {
    if (uploadedFile.value) {
      await createFile({
        project_id: props.selectedProject,
        user_id: userId,
        header_row: startingRow.value,
        uploaded_file: uploadedFile.value,
      }).then((res) => {
        if (res.data.code == 200) {
          filesStore.clearFilesForProject(props.selectedProject);
          initFiles();
          uploadDialog.value = false; // 关闭对话框
          uploadedFile.value = null; // 清空选择的文件
          $q.notify({
            type: "positive",
            message: "文件上传成功",
          });
        } else {
          $q.notify({
            type: "error",
            message: "文件上传失败",
          });
        }
      });
    } else {
      console.log("请先选择一个文件");
    }
  } else if (uploadOption.value === "create") {
    if (!newFileName.value) {
      $q.notify({
        type: "warning",
        message: "请输入文件名",
      });
      return;
    }

    // 创建 Excel 数据
    const worksheet = XLSX.utils.aoa_to_sheet([
      ["姓名", "年龄", "城市"], // 你可以根据需求自定义数据
      ["张三", 28, "北京"],
      ["李四", 22, "上海"],
      ["王五", 32, "广州"],
    ]);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 生成 Excel 文件
    const excelBuffer = XLSX.write(workbook, {
      bookType: "xlsx",
      type: "array",
    });
    const blob = new Blob([excelBuffer], {
      type: "application/octet-stream",
    });

    // 创建文件对象
    const file = new File([blob], newFileName.value + ".xlsx", {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    // 将生成的文件赋值给上传的文件变量
    uploadedFile.value = file;

    // 关闭创建对话框
    uploadDialog.value = false;

    // 上传生成的文件
    await createFile({
      project_id: props.selectedProject,
      uploaded_file: uploadedFile.value,
      header_row: startingRow.value,
    }).then((res) => {
      if (res.data.code == 200) {
        filesStore.clearFilesForProject(props.selectedProject);
        initFiles();
        $q.notify({
          type: "positive",
          message: "文件上传成功",
        });
      } else {
        $q.notify({
          type: "error",
          message: "文件上传失败",
        });
      }
    });
  }
};

const viewExcelContent = (file) => {
  selectedFileID.value = file.id;
  selectedFile.value = null;
  selectedFile.value = file; // 将文件赋值给子组件
  selectedFileHeader.value = false; // 清空之前的文件内容
  showDrawComponent.value = false;
};

const showFileInfo = async (file) => {
  fileHeaderInfo.value = [];
  selectedFileID.value = file.id;
  selectedFileHeader.value = true; // 将文件名称赋值给子组件
  selectedFile.value = null; // 清空之前的文件内容
  startingRow.value = file.header_row; //值是1
  showDrawComponent.value = false;
  // 提取指定行的内容
  const reader = new FileReader();
  reader.onload = (event) => {
    const data = new Uint8Array(event.target.result);
    const workbook = XLSX.read(data, {
      type: "array",
    });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];

    // 获取工作表的范围
    const range = XLSX.utils.decode_range(worksheet["!ref"]);
    console.log(range.e);
    // 检查header_row是否在范围内 star row & end row
    if (file.header_row < range.s.r || file.header_row > range.e.r) {
      fileHeaderInfo.value = []; // 如果行超出范围，则设置为空
      return;
    }

    // 提取指定行的内容 (row是0-based, 所以 header_row 需要减1)
    const rowData = [];
    //star col & end col
    for (let col = range.s.c; col <= range.e.c; col++) {
      //指定获取单元格的位置，行不变 是从0开始，col变化，即获取全部的表头
      const cellAddress = XLSX.utils.encode_cell({
        r: file.header_row - 1,
        c: col,
      });
      const cell = worksheet[cellAddress];

      let bllx = "连续型"; // 默认设置为连续型
      let isEmpty = true; // 用于标记是否找到非空单元格
      let blmax = null;


      // 从file.header_row的下一行开始检查，直到找到非空单元格或检查完所有行
      for (let row = file.header_row; row <= range.e.r; row++) {
        const nextCellAddress = XLSX.utils.encode_cell({
          r: row,
          c: col,
        });
        const nextCell = worksheet[nextCellAddress];
        // if (nextCell) {   //空白元格
        //   console.log("BBBBBBBBBB");
        // }
        // else {
        //   console.log("CCCCCCCCCCCCCCCC");
        // }
        if (nextCell) {
          isEmpty = false; // 找到非空单元格
          if (typeof nextCell.v === "number" && !isNaN(nextCell.v)) {
            console.log(Number.isInteger(nextCell.v));
            if (Number.isInteger(nextCell.v)) {
              bllx = "有序型"; // 如果是整数，设置为有序型
              break; // 找到整数，不需要继续检查
            } else {
              bllx = "连续型"; // 如果是小数，设置为连续
              break; // 找到小数，不需要继续检查
            }
          }
        }
      } //for



      for (let row = file.header_row; row <= range.e.r; row++) {
        const nextCellAddress = XLSX.utils.encode_cell({
          r: row,
          c: col,
        });
        const tableval = worksheet[nextCellAddress];
        if(tableval){
          blmax = (blmax=== null || tableval.v>blmax) ? tableval.v:blmax;

        }
      }

      if(blmax<=6 && bllx!="连续型"){
            bllx="分类型";
          }

      if (isEmpty) {
        bllx = "连续型"; // 如果所有行都是空的，默认设为连续型
      }
      let item = {
        blm: cell ? cell.v : null,
        bllx: bllx,
        blbq: null,
        blfz: null,
        blmax: blmax
      };
      rowData.push(item); // 如果单元格存在，取其值，否则设为null
    }
    fileHeaderInfo.value = rowData; // 将提取的行内容保存到 fileHeaderInfo 中
  };

  reader.readAsArrayBuffer(file.file); // 读取文件
};

const changeTab = (change) => {
  Tab.value = change;
  fetchFiles();
  if (change === "data") {
    initFiles();
    // 当切换到数据文件时，只显示组轨迹建模标签
    emit('update-available-tabs', ['modeling']);
    // 如果当前标签不是 modeling，则切换到 modeling
    if (props.currentTab !== 'modeling') {
      emit('update-tab', 'modeling');
    }
  } else if (change === "result") {
    // 当切换到结果文档时，只显示结果展示和自由绘图标签
    emit('update-available-tabs', ['result', 'drawing']);
    // 如果当前标签是 modeling，则切换到 result
    if (props.currentTab === 'modeling') {
      emit('update-tab', 'result');
    }
  }
};
const isShowData = ref(true);
// 数据管理
const controlData = () => {
  // 如果不是 modeling 标签页，不允许开启数据显示
  if (props.currentTab !== 'modeling') {
    $q.notify({
      type: 'warning',
      message: '只能在组轨迹建模页面开启数据显示',
      position: 'top'
    });
    return;
  }

  // 检查是否已选择文件
  if (!selectedFileID.value && isShowData.value) {
    $q.notify({
      type: 'warning',
      message: '请先选择一个文件',
      position: 'top'
    });
    return;
  }

  isShowData.value = !isShowData.value;
};

const handleDeleteFile = async (file) => {
  $q.dialog({
    title: "请确认",
    message: `您确定要删除文件吗？`,
    ok: {
      label: "确认",
      push: true,
      color: "negative",
    },
    cancel: {
      label: "取消",
      push: true,
    },
    persistent: true,
  })
    .onOk(async () => {
      const res = await deleteFile(file.id);
      if (res.data.code == 200) {
        filesStore.clearFilesForProject(props.selectedProject);
        initFiles();
        $q.notify({
          type: "positive",
          message: "文件删除成功",
        });
      } else {
        $q.notify({
          type: "error",
          message: "文件删除失败",
        });
      }
    })
    .onCancel(() => {
      this.$q.notify({
        message: "操作取消",
        type: "warning",
        timeout: 300,
      });
    });
};

const emit = defineEmits(['update-tab', 'update-available-tabs']);

const handleCloseModeling = () => {
  // 通知父组件更新 tab
  emit('update-tab', null);
};

// 在 script setup 中添加对 currentTab 的监听
watch(
  () => props.currentTab,
  (newValue) => {
    // 只有在 modeling 标签页时允许显示数据
    if (newValue !== 'modeling') {
      isShowData.value = false;
    }
  },
  { immediate: true }  // 确保组件初始化时也执行
);

// 在 script setup 中添加新的 ref
const selectedResultFile = ref(null);
</script>

<style scoped>
.user-group .q-expansion-item__label {
  font-size: 14px; /* 调整字体大小 */
  font-weight: bold;
}

.project-group .q-expansion-item__label {
  font-size: 12px; /* 项目标题小一点 */
}

.project-group .q-item {
  padding: 4px 8px; /* 控制文件项的尺寸 */
}

.q-expansion-item {
  margin-bottom: 8px;
}

.q-item {
  font-size: 12px; /* 控制文件项的字体大小 */
}

.q-list {
  padding: 0;
}

.container {
  display: flex;
  height: 80vh;
  /* 使用 vh 设置容器高度 */
}

.sidebar {
  max-width: 15%;
  /* 使用 vw 设置侧边栏宽度 */
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 1vh;
  /* 使用 vh 设置内边距 */
  position: relative;
}

.file-list {
  flex-grow: 1;
  overflow-y: auto;
  /* 允许纵向滚动 */
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  background-color: #fff;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  /* 将按钮组推到侧边栏的底部 */
  padding: 1vh 0;
  /* 使用 vh 设置按钮间距 */
  size: 0capture;
}

.small-button {
  font-size: 1em;
  /* 调整按钮文字大小 */
  padding: 3px 7px;
  /* 调整按钮内边距 */
}

.content {
  flex-grow: 1;
  padding-left: 2vh;
  /* 左侧内边距 */
  padding-right: 2vh;
  /* 右侧内边距 */
  padding-bottom: 2vh;
  /* 下方内边距 */
  max-height: fit-content;
  /* 上方不设置 padding */
}

.delete-icon {
  cursor: pointer;
  margin-left: auto;
  /* 使删除图标紧贴右侧 */
  padding-left: 16px;
  /* 可选：为图标增加一些内边距，与文件名分开 */
}

/* 普通状态 */
.file-item {
  cursor: pointer; /* 鼠标指针 */
  color: #333; /* 默认文字颜色 */
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

/* 悬停状态 */
.file-item:hover {
  background-color: #f0f0f0; /* 悬停时背景色 */
  color: #007bff; /* 悬停时文字颜色 */
}

/* 点击时的样式 (通过添加 `:active` 来定义) */
.file-item:active {
  background-color: #dcdcdc; /* 点击时背景色 */
  color: #0056b3; /* 点击时文字颜色 */
}

/* 你还可以通过添加一个状态类来标记已点击的项 */
.file-item.clicked {
  background-color: #e0e0e0; /* 已点击的背景色 */
  color: #666; /* 已点击的文字颜色 */
}

/* 选中文件的样式 */
.file-item-selected {
  background-color: #e3f2fd;
  border-left: 3px solid #1976d2;
}

/* 激活状态的样式（当文件被打开时） */
.file-item-active {
  background-color: #bbdefb;
  border-left: 3px solid #1565c0;
}

/* 修改文件项的悬停效果 */
.file-item:hover {
  background-color: #f5f5f5;
  transform: translateX(2px);
  transition: all 0.2s ease;
}

/* 选中状态下的悬停效果 */
.file-item-selected:hover,
.file-item-active:hover {
  background-color: #e3f2fd;
  transform: translateX(2px);
}

/* 添加过渡效果 */
.file-item {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  padding-left: 8px;
}

/* 添加激活状态的样式 */
.active-tab {
  color: #1976d2;
  font-weight: bold;
  border-bottom: 2px solid #1976d2;
  background-color: rgba(25, 118, 210, 0.1);
}

/* 修改按钮的基础样式 */
.q-btn {
  transition: all 0.3s ease;
  position: relative;
  margin: 0 4px;
}

/* 按钮悬停效果 */
.q-btn:hover:not(.active-tab) {
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 2px solid #e0e0e0;
}

/* 添加标题栏样式 */
.row {
  border-bottom: 1px solid #e0e0e0;
  background-color: #f5f5f5;
}

/* 结果文件选中状态的样式 */
.result-file-selected {
  background-color: #e3f2fd !important;
  border-left: 3px solid #1976d2 !important;
  font-weight: 500;
}

/* 结果文件的悬停效果 */
.result-file-selected:hover {
  background-color: #bbdefb !important;
}

/* 为结果文件项添加过渡效果 */
.file-item {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

/* 调整结果文件列表的样式 */
.user-group .q-item {
  padding: 8px 16px;
  margin: 2px 0;
  border-radius: 4px;
}

/* 添加悬停效果 */
.user-group .q-item:hover:not(.result-file-selected) {
  background-color: #f5f5f5;
  border-left: 3px solid #e0e0e0;
}
</style>
